<template>
	<view class="page">
		<cu-custom bgColor="bg-orange-form" :isBack="true">
		    <block slot="content">自由匹配</block>
		</cu-custom>
		<view class="filter_content">
			<view class="detail_container">
				<view class="line"></view>
				<text class="text">匹配条件</text>
				<view class="line"></view>
				<view class="red_circle_left"></view>
				<view class="red_circle_right"></view>
			</view>
			<form>
				<view class="cu-form-group">
					<view class="title">分类</view>
					 <picker
					      mode="selector"
					      :range="type_list"
						  v-model="form.cate_id"
					      range-key="title"
					      @change="select_type"
					    >
					      <view class="picker">
					        {{ selectedType.title ? selectedType.title : '选择分类' }}
					      </view>
					</picker>
				</view>
			
				<view class="cu-form-group">
					<view class="title">要求</view>
					<input placeholder="要求" v-model="form.require" name="input"></input>
				</view>
				
				<view class="cu-form-group" style="border-bottom: 1px solid #eee;">
					<view class="title">排序</view>
					<input placeholder="排序" type="text" v-model="form.sort_type" name="input"></input>
				</view>
			

			</form>
			<view class="text-center padding-lr-sm">
				<button class="cu-btn bg-orange-dark round lg margin-tb-lg" @click="group_detail" style="width: 90%;text-align: center;">立 即 匹 配</button>
			</view>
		</view>
		
		<view class="filter_content" style="background: rgba(255, 255, 255, 1);">
			<view class="detail_container">
				<view class="line"></view>
				<text class="text">匹配结果</text>
				<view class="line"></view>
				<view class="red_circle_left"></view>
				<view class="red_circle_right"></view>
			</view>
			<view class="shop-list">
				 <block v-if="groupList.length > 0">
					<view class="group_item flex align-center" v-for="(item,index) in groupList" :key="index">
						<image class="shop_img" :src="item.image" mode="aspectFill"></image>
						<view class="position_realtive">
							<view class="flex  align-center justify-between">
								<view class="room_title text-bold">{{item.name}}</view>
								<view class="text-right">
									<view class="shop_title">{{item.shop}}</view>
									<view  style="font-size: 20rpx;margin-top: 10rpx;"> <i class="cuIcon-locationfill text-orange-dark  margin-right-xs"></i> {{item.distance}}Km</view>
								</view>
							</view>
							<view class="flex margin-top-xs">
								<view class="num_btn">4人局</view>
								<view class="game_btn">4分一炮</view>
							</view>
							<view class="flex align-center margin-top-sm">
								<i class="cuIcon-time margin-right-xs lg"></i>
								<view class="game_time">{{item.time}}</view>
							</view>
							<view class="head_container">
							  <!-- 红色区域 -->
							  <view class="red-area">
								<text class="label">{{item.require || ''}}</text>
							  </view>
							  <!-- 黄色区域 -->
							  <view class="yellow-area">
								<text class="label">Go</text>
							  </view>
							</view>
							<view class="position_absolute  join_member">
								<view class="flex align-center">
									<view class="cu-avatar-group flex align-center">
									    <image v-for="(user,index) in item.join_user" 
										:key="index" class="cu-avatar round sm"
										:src="user.avatar" mode="aspectFill">
										</image>
							
									</view>
									<view>{{item.join_member || 0}} / {{item.member_max || 0}}</view>
								</view>
							</view>
						</view>
						
					</view>
				 </block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					cate_id: 1,
					agree: true,
					require: '',
					remark: '',
					sort_type: ''
				},
				type_list: [
					{ id: 1, title: '棋牌' },
					{ id: 2, title: '桌游' },
					{ id: 3, title: '其他' },
				],
				selectedType: { id: 1, title: '棋牌' }, // 默认选中第一个分类
				groupList: [
					{
						id: 1,
						name: '长沙麻将豪华包间',
						shop : '巴拉巴拉棋牌室',
						image: 'https://img.js.design/assets/img/66e7ec77cf90ad6de232e50d.png#8897541e728f48a3c20441ad78e3915b',
						distance: 3.4,
						address: '长沙市岳麓区建设路88号',
						member_max : 4,
						join_member : 1,
						join_user : [
							{
								uid : 1,
								avatar : 'https://img.js.design/assets/img/62be60ea83f0287de0f7e056.png'
							},
							{
								uid : 2,
								avatar : 'https://img.js.design/assets/img/62f0aef1f1bbfb041ecde063.png'
							}
						],
						time :'09月10 晚上10点',
						require: '要求：不抽烟，不拖欠牌品优秀',
						games: [
							{
								name: '4人局',
								players: '4',
							},
							{
								name: '4分一炮',
								players: '3'
							}
						]
					},
					{
						id: 1,
						name: '欢乐斗地主豪华包间',
						shop : '巴拉巴拉棋牌室',
						image: 'https://img.js.design/assets/img/66e7ec77cf90ad6de232e50d.png#8897541e728f48a3c20441ad78e3915b',
						distance: 3.4,
						address: '长沙市岳麓区建设路88号',
						member_max : 4,
						join_member : 1,
						join_user : [
							{
								uid : 1,
								avatar : 'https://img.js.design/assets/img/62be60ea83f0287de0f7e056.png'
							},
							{
								uid : 2,
								avatar : 'https://img.js.design/assets/img/62f0aef1f1bbfb041ecde063.png'
							}
						],
						time :'09月10 晚上10点',
						require: '要求：不抽烟，不拖欠牌品优秀',
						games: [
							{
								name: '4人局',
								players: '4',
							},
							{
								name: '4分一炮',
								players: '3'
							}
						]
					}
				]
			}
		},
		methods: {
			select_type(event) {
				const index = event.detail.value; // 获取选中的索引
				this.selectedType = this.type_list[index]; // 更新选中的分类
				this.form.cate_id = this.selectedType.id; // 更新表单中的分类ID
			},
			select_aggree(e) {
				var  values = e.detail.value[0];
				if(values){
					this.form.agree = true
				}else{
					this.form.agree = false
				}
			},
			group_detail() {
				// 处理组局逻辑
				console.log('组局详情', this.form);
			}
		}
	}
</script>

<style scoped>
	.filter_content{
		background:  rgba(255, 255, 255, 1);
		padding-top: 48rpx;
		padding-bottom: 30rpx;
		border-radius: 10rpx;
		margin-left: 26rpx;
		margin-right: 26rpx;
		margin-top: 52rpx;
	}
	.group_item{
		background: #fff;
		margin-bottom: 18rpx;
	}
	.page{
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, rgba(254, 163, 102, 1) 0%, rgba(255, 87, 51, 1) 100%);;
	}
	.filter_content .title{
		width: 250rpx;
	}
	.detail_container {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 100%;
	  color: rgba(254, 94, 41, 1);
	  font-size: 32rpx;
	  padding:18rpx 50rpx;
	  position: relative;
	}
	
	.line {
	  flex: 1;
	  height: 1px;
	  border-bottom: 1px dashed rgba(254, 94, 41, 1);
	}
	
	.text {
	  margin: 0 10px;
	  white-space: nowrap;
	}
	.shop-list {
	    flex: 1;
	    padding: 20rpx 20rpx;
		
	}
	
	.shop-list .shop_img{
		width: 250rpx;height: 250rpx;margin-right: 8rpx;border-radius: 10rpx;
	}
	
	.shop-list .room_title{
		font-size: 26rpx;
		color: rgba(51, 51, 51, 1);
	}
	
	.shop-list .shop_title{
		font-size: 20rpx;
		color: rgba(51, 51, 51, 1);
	}
	
	.shop-list .num_btn{
		border-radius: 5rpx;
		background: rgba(228, 59, 62, 1);
		color: #fff;
		padding: 5rpx 15rpx;
		font-size: 24rpx;
		margin-right: 12rpx;
	}
	.shop-list .game_btn{
		background: rgba(255, 235, 59, 1);
		border-radius: 5rpx;
		padding: 5rpx 15rpx;
		font-size: 24rpx;
		color: rgba(212, 48, 48, 1);
	}
	.game_time{
		color: rgba(51, 51, 51, 1);
		font-size: 24rpx;
	}
	.head_container {
		  display: flex;
		  height: 82rpx; /* 根据需要调整高度 */
		  overflow: hidden; /* 隐藏超出部分 */
		  margin-top: 25rpx;
		}
		
		.red-area {
		  flex: 2;
		  background: linear-gradient(90deg, rgba(255, 132, 3, 1) 0%, rgba(254, 60, 50, 1) 100%); /* 红色 */
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  position: relative;
		  color: #fff;
		  font-size: 24rpx;
		  padding-left: 20rpx;
		  border-top-left-radius: 10rpx;
		  border-bottom-left-radius: 10rpx;
		}
		
		.red-area .label {
			margin-right: 10rpx;
		}
		.red-area .or_price{
			font-size: 20rpx;
			text-decoration: line-through;
		}
		
		.red-area::after {
		  content: '';
		  position: absolute;
		  right: -30px; /* 控制三角形的位置 */
		  top: 0;
		  width: 0;
		  height: 0;
		  border-top: 20px solid transparent; /* 上半部分三角形 */
		  border-bottom: 30px solid transparent; /* 下半部分三角形 */
		  border-left: 30px solid rgba(254, 60, 50, 1); /* 三角形宽度和颜色 */
		}
		
		.yellow-area {
		  flex: 1;
		  background-color: rgba(255, 228, 95, 1); /* 黄色 */
		  display: flex;
		  flex-direction: column;
		  justify-content: center;
		  align-items: center;
		  color: rgba(228, 59, 62, 1);
		  font-size: 30rpx;
		  padding-left: 40rpx;
		  border-top-right-radius: 10rpx;
		  border-bottom-right-radius: 10rpx;
		}
		.join_member{
			border-radius: 13px 0px, 0px, 13px;
			background: rgba(255, 235, 232, 1);
			font-size: 22rpx;
			color: rgba(228, 59, 62, 1);
			padding: 10rpx 0;
			padding-right: 10rpx;
			right : -10rpx;
			top : 80rpx;
			border-top-left-radius: 30rpx;
			border-bottom-left-radius: 30rpx;
			
		}
</style>